/**
 * Created by 3dgis on 2017/4/24.
 */
import React,{Component} from 'react';
import * as THREE from 'three';

import {VectorTile} from 'vector-tile';
import Protobuf from 'pbf';
import Building from '../entities/Building';
import Landuse from '../entities/Landuse';
import Water from '../entities/Water';
import Road from '../entities/Road';
import {getTileSize,getTileExtentInMeters} from '../util/util';

/**
 * props:scene,tile
 */
class Tile extends Component {
    constructor(props){
        super(props);
        const {tile} = this.props;
        let result = getTileSize(tile.level);
        let tileExtent = getTileExtentInMeters(tile.x,tile.y,tile.level);
        // console.log(tileExtent);
        this.state={
            renderContents:null,
            tileSize:result.widthInMeters,
            westInMeters:tileExtent.west,
            northInMeters:tileExtent.north,
            tileObject:new THREE.Object3D(),
            bboxEnable:false
        }
    }
    componentWillMount(){
        const {x,y,level} = this.props.tile;
        console.log(`tile ${x} ${y} ${level} will mount`);
        this.updateTile(x,y,level);
    }
    componentWillUnmount(){
        this.setState({renderContents:null});
        const {tilesGroup}=this.props;
        if(tilesGroup && this.state.tileObject){
            tilesGroup.remove(this.state.tileObject);
        }
    }
    componentWillReceiveProps(nextProps){
        // const {x,y,level} = this.props.tile;
        // console.log(x,y,level);
        // const {x:nx,y:ny,level:nlevel} = nextProps.tile;
        // console.log(nx,ny,nlevel);
        // console.log(`tile ${nx} ${ny} ${nlevel} will receive props`);
    }
    componentWillUpdate(nextProps){
        // const {x,y,level} = nextProps.tile;
        // console.log(`tile ${x} ${y} ${level} will update`);
        // this.updateTile(x,y,level);
    }
    updateTile=(x,y,level)=>{
        let {tileObject} = this.state;
        if(this.state.bboxEnable){
            let bboxGeometry = new THREE.BoxGeometry(this.state.tileSize,this.state.tileSize,1);
            let bboxWireframe = new THREE.WireframeGeometry( bboxGeometry );

            let line = new THREE.LineSegments( bboxWireframe );
            line.material.depthTest = false;
            line.material.opacity = 0.25;
            line.material.transparent = true;
            line.position.set(this.state.tileSize/2,-this.state.tileSize/2,0);
            tileObject.add(line);
        }


        if(this.props.data && this.props.tilesGroup) {
            let tilesGroup=this.props.tilesGroup;

            let tile = new VectorTile(new Protobuf(this.props.data));
            let building = tile.layers.building;
            let landuse = tile.layers.landuse;
            let water = tile.layers.water;
            let road = tile.layers.road;
            let contents =(
                <span>
                    <Building
                        tileObject={tileObject}
                        layer={building}
                        tileSize={this.state.tileSize}
                    />
                    <Landuse
                        tileObject={tileObject}
                        layer={landuse}
                        tileSize={this.state.tileSize}
                    />
                    <Water
                        tileObject={tileObject}
                        layer={water}
                        tileSize={this.state.tileSize}
                    />
                    <Road
                        tileObject={tileObject}
                        layer={road}
                        tileSize={this.state.tileSize}
                    />
                </span>
            );

            tileObject.position.set(this.state.westInMeters,this.state.northInMeters,0);
            tilesGroup.add(tileObject);
            this.setState({renderContents:contents});
        }
    }
    render(){
        if(this.state.renderContents){
            console.log('render content in tile');
            return (this.state.renderContents);
        }
        else{
            return null;
        }
    }
}

export default Tile;